<template>
  <div class="m-search-wp">
  	<a-form ref="formRef" :model="props.model">
  		<div class="s-row">
  			<slot></slot>
	  		<div class="s-col btn-box">
					<a-space v-if="!slots.operate">
						<a-button @click="() => formRef.resetFields()">重置</a-button>
						<a-button type="primary" @click="search()">查询</a-button>
					</a-space>
					<slot v-else name="operate"></slot>
				</div>
  		</div>
  	</a-form>
  </div>
</template>

<script setup>
	import { reactive, ref, onMounted, useSlots } from 'vue'

	const slots = useSlots();
	const emit = defineEmits(['search']);

	const formRef = ref();

	const props = defineProps({
		model: {
			type: Object
		}
	})

	function search() {
		emit('search');
	}

</script>

<style lang="less">
.m-search-wp {
	margin-bottom: 10px;
	padding: 20px 20px 0;
	background: #fff;

	.s-row {
		display: flex;
		gap: 3%;
		.s-col {
			flex: 1;
		}
		.btn-box {
			flex: none;
			display: flex;
			align-items: flex-end;
			padding-bottom: 24px;
		}
	}
}
</style>